<!--
 * @Author: sunli
 * @Date: 2024-02-20 09:47:59
 * @LastEditors: sunli
 * @LastEditTime: 2024-02-21 15:07:07
 * @FilePath: /debug/src/views/operation/person.vue
 * @Description: 
-->
<template>
	<div class="project-detail">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
		<div class="main">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="base">
          <!-- 基本信息 -->
          <div class="baseinfo">
            <el-descriptions>
              <el-descriptions-item label="用户名">{{userVO.userName}}</el-descriptions-item>
              <el-descriptions-item label="手机号码">{{userVO.mobile}}</el-descriptions-item>
              <el-descriptions-item label="电子邮箱">{{userVO.email}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
	</div>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

import useStore from '@/store/index'

const store = useStore()
const router = useRouter()

const activeName = ref('base')

const userVO = ref(store.userVO)
</script>

<style lang="scss" scoped>
.label {
  display: inline-block;
  width: 300px;
}
.el-switch {
  margin-left: 20px;
}
.nav {
  padding: 20px 10px;
}
.main {
  margin: 0 auto;
  max-width: 900px;
  .report {
    p {
      font-size: 14px;
      font-weight: 500;
    }
    .label {
      font-size: 14px;
      color: #606266;
    }
  }
}
</style>
  